<template>
	<view class="content">
		<view class="login-box">
			<view class="title">
				欢迎使用Odoo
			</view>
			<input class='input' type="text" v-model="userJson.username" placeholder="用户名" />
			<input class='input' type="text" v-model="userJson.password" placeholder="密码" />
			<view class="btn" @click="gotoHome()" v-if="index == 0">
				登陆
			</view>
			<view class="btn-box" v-if="index == 1">
				<view class="btn" @click="gotoHome()">
					登陆
				</view>
				<view class="btn" @click="login()">
					微信登录
				</view>
			</view>
		</view>
		<view class="banben">
			3.0.5 正式版
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	const userJson = reactive({
		username: '',
		password: ''
	})

	import {
		getData
	} from '@/tools/tools.js'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		user_Login,
		getUserOpenid,
		weChatOpenidLogin
	} from '../../api/login.js'

	const index = ref(0)


	const gotoHome = () => {
		if (userJson.username == "") {
			uni.showModal({
				title: '提示',
				content: '请输入用户名'
			})
			return
		}


		if (userJson.password == "") {
			uni.showModal({
				title: '提示',
				content: '请输入密码'
			})
			return
		}

		user_Login(userJson).then((res) => {
			console.log('登录数据', res);

			if (res.user.id) {

				let data = {
					id: res.user.id
				}

				let all = JSON.stringify(data)

				console.log('序列化之后的参数', all);
				uni.setStorage({
					key: 'user',
					data: all,
					success: function() {
						console.log('数据存储完成，password');
					}
				});

				uni.redirectTo({
					url: '/pages/Home/Home'
				});

			} else {
				uni.showModal({
					title: '提示',
					content: '用户明或密码错误'
				})
			}
		})
	}

	const login = () => {

		uni.login({
			provider: 'weixin', //使用微信登录
			success: function(option) {
				console.log(option.code);

				if (option.code) {
					// 获取openid
					getUserOpenid(option.code).then((res) => {
						if (res.open_id) {

							weChatOpenidLogin(res.open_id).then((res2) => {
								console.log(res2);

								if (res2.user) {
									let data = {
										id: res2.user.id
									}

									let all = JSON.stringify(data)

									console.log('序列化之后的参数', all);
									uni.setStorage({
										key: 'user',
										data: all,
										success: function() {
											console.log('数据存储完成，password');
										}
									});

									uni.redirectTo({
										url: '/pages/Home/Home'
									});
								}

								if (res2.message == '未绑定微信') {
									return
								}
							})

						} else {

							uni.showModal({
								title: '提示',
								content: '微信自动登录失败'
							})
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '微信自动登录失败'
					})
				}
			}
		});
	}

	onLoad(() => {
		let id = getData().id

		if (id != null) {
			index.value = 1
		}
	})
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 300rpx;
		padding-left: 80rpx;
		padding-right: 80rpx;

		.login-box {
			.title {
				font-size: 50rpx;
				margin-bottom: 16rpx;
			}

			.input {
				padding: 4rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid gainsboro;
			}

			.btn {

				margin-top: 20rpx;
				text-align: center;
				background-color: #a1eafb;
				padding: 20rpx;
				border-radius: 10rpx;
			}

			.btn-box {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;

				.btn {

					margin-top: 20rpx;
					text-align: center;
					background-color: #a1eafb;
					padding: 20rpx;
					border-radius: 10rpx;
				}
			}
		}

		.banben {
			text-align: center;
		}
	}
</style>